<template>
  <div class="app-container">
    <el-button type="primary" @click="handleAdd">新建</el-button>

    <el-table :data="list" style="width: 100%;margin-top:30px;" border>
      <el-table-column align="center" label="ID" min-width="50">
        <template slot-scope="scope">
          {{ scope.row.id }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="叫车轮次" min-width="50">
        <template slot-scope="scope">
          {{ scope.row.round }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="叫车半径(米)" min-width="80">
        <template slot-scope="scope">
          {{ scope.row.radius }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="叫车间隔时间(秒)" min-width="80">
        <template slot-scope="scope">
          {{ scope.row.gapTime }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="最大呼叫数" min-width="50">
        <template slot-scope="scope">
          {{ scope.row.pushMaxCar }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="是否返回提示信息" min-width="50">
        <template slot-scope="scope">
          <el-tag
            closable
            v-text="scope.row.isCallback === 1 ? '是' : '否'"
          >
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" label="提示用户信息" min-width="100">
        <template slot-scope="scope">
          {{ scope.row.callbackInfo }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" min-width="200">
        <template slot-scope="scope">
          <el-button type="primary" size="small" @click="handleEdit(scope)">编辑</el-button>
          <el-button type="danger" size="small" @click="handleDelete(scope)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog :visible.sync="dialogVisible" :title="dialogType==='edit'?'编辑用户':'新建用户'">
      <el-form :model="scopeData" label-width="150px" label-position="left">
        <el-form-item label="叫车轮次">
          <el-slider
            v-model="scopeData.round"
            :max="10"
            :show-stops="true"
            show-input>
          </el-slider>
        </el-form-item>
        <el-form-item label="叫车半径(米)">
          <el-slider
            v-model="scopeData.radius"
            :show-stops="true"
            show-input
            :min="200"
            :max="3000">
          </el-slider>
        </el-form-item>
        <el-form-item label="叫车间隔时间(秒)">
          <el-slider
            v-model="scopeData.gapTime"
            :show-stops="true"
            show-input
            :min="15"
            :max="60 * 5">
          </el-slider>
        </el-form-item>
        <el-form-item label="最大呼叫数">
          <el-slider
            v-model="scopeData.pushMaxCar"
            :show-stops="true"
            show-input
            :min="1"
            :max="10">
          </el-slider>
        </el-form-item>
        <el-form-item label="是否返回提示信息">
          <el-switch
            v-model="scopeData.isCallback"
            :active-value="1"
            :inactive-value="0"
            active-color="#13ce66"
            inactive-color="#ff4949">
          </el-switch>
        </el-form-item>
        <el-form-item label="提示用户信息">
          <el-input v-model="scopeData.callbackInfo" placeholder="请输入提示用户信息"/>
        </el-form-item>
        <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <el-button type="primary" size="small" @click="handleEdit(scope)">编辑</el-button>
            <el-button type="danger" size="small" @click="handleDelete(scope)">删除</el-button>
          </template>
        </el-table-column>
      </el-form>
      <div style="text-align:right;">
        <el-button type="danger" @click="dialogVisible=false">取消</el-button>
        <el-button type="primary" @click="confirm">确认</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import path from 'path'
import { getCallConfigList, insertOrUpdateCallConfig, deleteCallConfig } from '@/api/operator'
import { getToken } from '@/utils/auth'

const defaultRole = {
  key: '',
  name: '',
  description: '',
  routes: []
}

export default {
  name: 'CallManager',
  data() {
    return {
      role: Object.assign({}, defaultRole),
      list: [],
      dialogVisible: false,
      dialogType: 'new',
      checkStrictly: false,
      checkedRole: [],
      scopeData: {},
      multipleSelection: [],
      isChangePassword: true,
      isAddModel: false,
      imageUrl: ''
    }
  },
  computed: {
    uploadHeader() {
      return {
        Authorization: 'Bearer ' + getToken()
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    async getList() {
      const res = await getCallConfigList()
      console.log(res)
      this.list = res.data
    },
    handleAdd() {
      this.imageUrl = ''
      this.isChangePassword = false
      this.isAddModel = true
      this.scopeData = {}
      this.dialogType = 'new'
      this.dialogVisible = true
    },
    handleEdit(scope) {
      this.imageUrl = ''
      this.isAddModel = false
      this.dialogType = 'edit'
      this.dialogVisible = true
      this.checkStrictly = true
      this.scopeData = scope.row
    },
    handleDelete({ $index, row }) {
      this.$confirm('确认要删除这个配置吗?', 'Warning', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async() => {
          const data = {
            id: row.id
          }
          await deleteCallConfig(data)
          this.list.splice($index, 1)
          this.$message({
            type: 'success',
            message: 'Delete succeed!'
          })
        })
        .catch(err => {
          console.error(err)
        })
    },
    async confirm() {
      const isEdit = this.dialogType === 'edit'
      console.log(isEdit)
      const data = this.scopeData
      const res = await insertOrUpdateCallConfig(data)
      await this.getList()
      const { id } = res
      this.dialogVisible = false
      this.$notify({
        title: 'Success',
        dangerouslyUseHTMLString: true,
        message: `
            <div>配置ID: ${id}</div>
          `,
        type: 'success'
      })
    },
    // reference: src/view/layout/components/Sidebar/SidebarItem.vue
    onlyOneShowingChild(children = [], parent) {
      let onlyOneChild = null
      const showingChildren = children.filter(item => !item.hidden)

      // When there is only one child route, the child route is displayed by default
      if (showingChildren.length === 1) {
        onlyOneChild = showingChildren[0]
        onlyOneChild.path = path.resolve(parent.path, onlyOneChild.path)
        return onlyOneChild
      }

      // Show parent if there are no child route to display
      if (showingChildren.length === 0) {
        onlyOneChild = { ...parent, path: '', noShowingChildren: true }
        return onlyOneChild
      }

      return false
    },
    handleAvatarSuccess(res, file) {
      console.log(res)
      this.scopeData.imgUrl = res.data
      this.imageUrl = URL.createObjectURL(file.raw)
    },
    beforeAvatarUpload(file) {
      return true
      // const isJPG = file.type === 'image/jpeg'
      // const isLt2M = file.size / 1024 / 1024 < 2
      //
      // if (!isJPG) {
      //   this.$message.error('上传头像图片只能是 JPG 格式!')
      // }
      // if (!isLt2M) {
      //   this.$message.error('上传头像图片大小不能超过 2MB!')
      // }
      // return isJPG && isLt2M
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  .roles-table {
    margin-top: 30px;
  }

  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }

  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
}
</style>
